<template>
  <!-- 轮播图 -->
  <el-carousel :indicator-position="carouselData.position" :height="carouselData.height ||'300px'" :type="carouselData.type|| null"
               :autoplay="carouselData.autoplay || true" :loop="carouselData.loop || true">
    <el-carousel-item v-for="(item,index) of carouselData.path" :key="index" height="50%">
        <el-image
          :style="item.style? item.style:null"
          :src="getBaseImagePath(item.path)"
          @click="switchImagePath(item)"
          :fit="carouselData.fit || 'cover'"></el-image>
    </el-carousel-item>
  </el-carousel>
</template>

<script>

 import BaseVue from '../../components/BaseVue'

  export default {
    name: 'Carousel',
    extends:BaseVue,
    props: {
      carouselData: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    data(){
      return {

      }
    },

    methods: {
      switchImagePath(item){
        if (!item.allow)  return;
        this.$emit('switchImagePath',item)
      },
    },
  }

</script>


<style scoped>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
